<template>
    <el-row>
        <el-col>
            <el-button type="primary" @click="addDialog()">新增</el-button>
        </el-col>
        <el-col :span="24" class="table-container">
            <el-table :data="tableData" stripe width="80%" header-cell-class-name="table-header-class">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="userName" label="用户名" width="180" />
                <!-- <el-table-column prop="pwd" label="密码" width="180" /> -->
                <el-table-column prop="realName" label="昵称" />
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small">
                            查看
                        </el-button>
                        <el-button link type="primary" size="small" @click="userDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col>
            <el-pagination v-show="page.total > 0" :current-page="page.currentPage" :page-size="page.pageSize"
                :page-sizes="[10, 20, 30]" layout="prev, pager, next, jumper,sizes" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" background prev-text="上一页"
                next-text="下一页" class="pagination-container" />
        </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="新增用户" width="500">


        <el-form label-width="auto" :model="userForm" :rules="userFormRules">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="userForm.userName" />
            </el-form-item>
            <el-form-item label="真实姓名">
                <el-input v-model="userForm.realName" />
            </el-form-item>
        </el-form>
        <el-alert title="初始密码为:123456" type="warning" :closable="false" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="userAdd"> 提交 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { selectUserList, userInsert, userDelete } from '@/http/userManage'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)

const page = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
})


const tableData = ref([])

const userForm = ref({})

const userFormRules = ref({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 50, message: '长度在3-50', trigger: 'blur' },
    ],
    realName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 50, message: '长度在3-50', trigger: 'blur' },
    ],
})

const handleClick = () => {
    console.log('click')
}

const handleCurrentChange = (val) => {
    page.value.currentPage = val
    selectPage()
}

const handleSizeChange = (val) => {
    page.value.pageSize = val
    selectPage()
}

const selectPage = () => {
    selectUserList(page.value.currentPage, page.value.pageSize).then(res => {
        if (res.data) {
            tableData.value = res.data.records
            page.value.total = res.data.total
        }
    })
}

const addDialog = () => {
    dialogVisible.value = !dialogVisible.value;
}

const userAdd = () => {
    userInsert(userForm.value).then(res => {
        if (res.code === 200) {
            ElMessage({
                message: '新增完成',
                type: 'success',
            })
            dialogVisible.value = !dialogVisible.value;
            userForm.value = {}
            selectPage()
        }
    })
}

const userDel = (item) => {
    console.log(item.id)
    userDelete(item.id).then(res => {
        if (res.code === 200) {
            ElMessage({
                message: '删除完成',
                type: 'success',
            })
            selectPage()
        }
    })
}


selectPage()

</script>

<style></style>